<template>
  <view class="card">
    <view class="order-box item" :style="{ background: bgCloor }">
      <view class="title">
        <text>
          <slot name="title"></slot>
        </text>
      </view>

      <view class="ul">
        <view
          v-for="(item, index) in list"
          :key="index"
          class="li"
          @click="handle(item)"
        >
          <svg-icon
            class="ia"
            :size="25"
            :name="item.icon"
            :color="item.color"
          ></svg-icon>
          <text class="txt">{{ item.title }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch,
  onMounted,
  getCurrentInstance,
} from 'vue'

import svgIcon from '@/components/icon/src/svg/svg-icon.vue'

export interface ItemType {
  id: number
  title: string
  icon: string
  color: string
  path: string
}

const emit = defineEmits(['handle'])
const props = defineProps({
  propData: {
    type: String,
    default: '',
  },
  bgCloor: {
    type: String,
    default: '#fff',
  },
  list: {
    type: Array<any>,
    default: () => [],
  },
})

const handle = (item: ItemType) => {
  emit('handle', item)
}

//const { } = toRefs(props);
</script>
<style lang="scss" scoped>
.card {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;

  .item {
    width: 95vw;
    height: auto;

    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    margin-top: 20rpx;

    .title {
      width: 100%;
      height: 70rpx;
      color: #303133;
      font-size: 0.8rem;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 20rpx;
    }

    .ul {
      width: 100%;
      display: flex;
      justify-content: space-around;

      .li {
        width: 150rpx;
        height: 150rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20rpx 0;

        .ia {
          margin-bottom: 10rpx;
        }

        .txt {
          font-size: 0.8rem;
        }
      }
    }
  }
}
</style>
